/**
 * Created by Administrator on 2017\9\18 0018.
 */
import React from 'react';
import template from './../../commonui/template';
import { Link } from 'react-router-dom';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
import  './../../css/User/UsrHome.css';
const Search = Input.Search;
const FormItem=Form.Item;
import UsrHeader from './UsrHeader';

class UsrHome extends React.Component{
    constructor(props){
        super(props);
        this.serach=this.serach.bind(this);
        this.getCaptcha=this.getCaptcha.bind(this);
        this.checkCaptcha=this.checkCaptcha.bind(this);
        this.quickrgster=this.quickrgster.bind(this);
      /*  this.drawLogin=this.drawLogin.bind(this);*/
        this.state={
            user: this.props.location.state&&this.props.location.state.user,
            lb:this.props.location.state&&this.props.location.state.lb
         }
    }
    serach(value){
        console.log(value)
    }
    getCaptcha(){
        this.setState({
            getCaptcha:'12345'
        })
    }
    checkCaptcha(rule,value,callback){
        console.log(value);
        if(value&&value!==this.state.getCaptcha){
            callback("the captcha is wrong !")
        }else{
            callback();
        }
    }
    quickrgster(e){
         const data=this.props.form.getFieldsValue();
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
        /****ajax***/
    }
    success(){
        /***ajax 成功换页面且保存登录用户**/
        this.setState({
            user:'success'
        })
    }
    /*drawLogin(){
        if(this.state.user){
            return (<li><Link to={{pathname:"/UsrCenter",state:{user:this.state.user,lb:this.state.lb}}}>{this.state.user}</Link></li>)
        }else{
             return (<li><Link to={{pathname:"/login"}}>Login</Link></li>)
        }
    }*/
    render(){
         const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <UsrHeader info={this.state}/>
                <div>
                    <div><Link to={{pathname:"/MdicalRport",test:'test'}}>Check your Medicial Report</Link></div>
                    <div  className="banner" style={{display:this.state.RgsterShow}}>
                        <div className="quickRgster">
                            <Form onSubmit={this.quickrgster}>
                                <Row>
                                    <Col>
                                        <FormItem label="Tel"  >
                                            {getFieldDecorator('telphone',{
                                                rules:[
                                                    {
                                                        required: true, message: 'Please input your phone number'
                                                    }]
                                            })(<Input/>)
                                            }
                                        </FormItem>
                                        <FormItem label="Captcha">
                                            <Row gutter={8}>
                                                <Col span={12}>
                                                    {getFieldDecorator('captcha',{
                                                        rules:[{required:true,message:'Please input the captcha u got'},{
                                                            validator:this.checkCaptcha
                                                        }]
                                                    })(
                                                        <Input size="large"/>
                                                    )
                                                    }
                                                </Col>
                                                <Col>
                                                    <Button size="large" onClick={this.getCaptcha}>Get captcha</Button>
                                                </Col>
                                            </Row>
                                        </FormItem>
                                        <FormItem label="name">
                                            {getFieldDecorator('name',{
                                                rules:[{required:true,message:'Please input your name'}]
                                            })(
                                                <Input/>
                                            )}
                                        </FormItem>
                                        <FormItem label="ID">
                                            {getFieldDecorator('id',{
                                                rules:[{required:true,message:'Please input your id'}]
                                            })(
                                                <Input/>
                                            )}
                                        </FormItem>
                                        <FormItem label="E-mail">
                                            {getFieldDecorator('email',{
                                                rules:[{
                                                    required:'required',message:'Please input yout e-mail'
                                                },{
                                                    type:'email',message:'The input is not valid E-mail'
                                                }]
                                            })(
                                                <Input/>
                                            )
                                            }
                                        </FormItem>
                                    </Col>
                                    <Col>
                                        <button htmltype="submit">Register</button>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </div>
                    <div  className="quickRgster">
                        <h4>Register Successfully!</h4>
                        <div>
                            <button>
                                No,I'll stroll around
                            </button>
                            <button>
                                <Link to={{pathname:"/Orgination"}}>Reserve health check</Link>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const UserHome =Form.create()(UsrHome);
export default template({
    id: 'UserHome',
    component: UserHome
});